<template>

  <el-container style="min-height: 100vh; border: 1px solid #eee">
    <el-aside width="sideWidth + 'px'"
              style="background-color: rgb(238, 241, 246); height:100vh; width:12%; box-shadow: 3px 0 6px rgb(0 21 0 )">
<!--利用组件代替 原来的侧边栏部分-->
      <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
    </el-aside>

    <el-container>
      <el-header style=" border-bottom: 1px solid #ccc; ">
        <!--利用组件代替 原来的部分-->
      <Header :collapseBtnClass="collapseBtnClass" :collapse="isCollapse"/>
      </el-header>

      <el-main>
<!--        表示当前页面的子路由会在 router-view 中展示-->
        <router-view  />
      </el-main>

    </el-container>
  </el-container>

</template>

<script>

import Aside from "@/components/Aside";
import Header from "@/components/Header";

export default {
  name: 'HomeView',
  components: {Header, Aside},
  data() {

    return {
      isCollapse: false,
      logoTextShow: true,
      collapseBtnClass: "el-icon-s-fold"
    }

  },

  component: {
    Aside,
    Header
  },
  methods: {
    collapse() { //点击收缩按钮的时候就将侧边栏收缩
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.logoTextShow = false
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
      } else {
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    }

  }
}
</script>

<style>
.headerBg {
  background-color: #eeeeee !important;

}

</style>
